<template>
  <div class="icon-template" @click.prevent="handleClick">
    <a-tooltip>
      <template v-slot:title>
        {{tip}}
      </template>
      <a-button :type="checked ? 'primary' : 'default'" shape="circle">
        <template v-slot:icon><component :is="iconName" /></template>
      </a-button>
    </a-tooltip>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { BoldOutlined, ItalicOutlined, UnderlineOutlined } from '@ant-design/icons-vue'
export default defineComponent({
  components: {
    BoldOutlined,
    ItalicOutlined,
    UnderlineOutlined
  },
  props: {
    iconName: {
      type: String,
      required: true
    },
    checked: {
      type: Boolean,
      default: false
    },
    tip: {
      type: String
    }
  },
  emits: ['change'],
  setup (props, context) {
    const handleClick = () => {
      context.emit('change', !props.checked)
    }
    return {
      handleClick
    }
  }
})
</script>

<style>

</style>
